<template>
  <view class="home">
    <!-- 头部 -->
    <homeTop></homeTop>
    <!-- tab栏 -->
    <view class="da1">
      <view class="da11" v-for="(item,index) in vaccine" :key="index" @click="go(index)">
        <image :src="item.image" mode=""></image>
        <view class="title">
          {{ item.title }}
        </view>
      </view>
    </view>
    <!-- 预约挂号&将康体检 -->
    <view class="da2">
      <view class="da21" @click="go2">
        <view class="title">
          {{ reserve[0].title }}
        </view>
        <view class="title no">
          {{ reserve[0].describe }}
        </view>
        <image :src="reserve[0].image" mode=""></image>
      </view>
      <view class="da21" style="background: linear-gradient(to right, #fddbb3, #fac577);" @click="go5">
        <view class="title">
          {{ reserve[1].title }}
        </view>
        <view class="title no">
          {{ reserve[1].describe }}
        </view>
        <image :src="reserve[1].image" mode=""></image>
      </view>
    </view>
    <!-- 热门挂号 -->
    <view class="da3">
      <view class="da31">
        <view class="da311">
          热门挂号
        </view>
        <view class="da311">
          查看更多 &#x27A4;
        </view>
      </view>
      <view class="da32">
        <view class="da321" v-for="(item,index) in popular.popular" :key="index"
              :style="{background:item.background}" @click="go1(item)">
          <view class="title">
            {{ item.title }}
          </view>
          <view class="">
            <image :src="item.image" mode=""></image>
          </view>
        </view>
      </view>
    </view>
    <!-- 健康自测 -->
    <view class="da3">
      <view class="da31">
        <view class="da311">
          健康自测
        </view>
      </view>
      <view class="da33" style="padding-top:15px;box-shadow: 1px 1px 10px #ccc;" @click="go3">
        <view class="da331" style="width:100%">
          <view>{{ testtop[0].name }}</view>
          <view style="color:#ccc;font-size:14px;margin-top:5px;">{{ testtop[0].describe }}</view>
          <view class="text">
            <view style="font-size:16px;width:50px;color:black">{{ testtop[0].number_of_people }}</view>
            人测过/
            {{ testtop[0].question }}题/{{ testtop[0].minute }}分钟
          </view>
        </view>
        <image :src="testtop[0].image" mode=""></image>
      </view>
      <view class="da34">
        <view class="da331" style="width:46%;box-shadow: 1px 1px 10px #ccc;" v-for="(item,index) in test"
              :key="index" @click="go4(index)">
          <view>{{ item.name }}</view>
          <view style="color:#ccc;font-size:14px;margin-top:5px;">{{ item.describe }}</view>
          <view class="text">
            {{ item.question }}题/{{ item.minute }}分钟
          </view>
          <view class="text">
            <view style="font-size:16px;width:40px;color:black">{{ item.number_of_people }}</view>
            人测过
          </view>
          <image class="img" :src="item.image" mode=""></image>
        </view>
      </view>
    </view>
    <view class="ll">
    </view>
  </view>
</template>

<script>
import homeTop from "../../../medical treatment/components/homeTop/homeTop.vue"
import hometab from "../../../medical treatment/components/hometab/hometab.vue"
import {
  frontpage
} from "../../utils/API/homeapi.js"

export default {
  components: {
    homeTop,
    hometab
  },

  data() {
    return {
      area: null,
      vaccine: null,
      reserve: null,
      popular: null,
      test: null,
      testtop: null
    };
  },
  async mounted() {
    // 存储小胶囊的位置 存到本地
    wx.setStorageSync('area', uni.getMenuButtonBoundingClientRect())
    let {
      data
    } = await frontpage()
    this.vaccine = data[0].vaccine;
    this.reserve = data[1].reserve;
    this.popular = data[2];
    this.test = data[3].self_test.slice(1, 3);
    this.testtop = data[3].self_test.slice(0, 1);
  },
  methods: {
    go(index) {
      switch (index) {
        case 0:
          wx.navigateTo({url: '/pages/vaccine/vaccine'})
          break;
        case 1:
          wx.navigateTo({url: '/pages/otuhpvlist/otuhpvlist'})
          break;
        case 2:
          wx.navigateTo({url: '/pages/nuata/nuata'})
          break;
        case 3:
          wx.navigateTo({url: '/pages/image-text/image-text'})
          break;
      }
    },
    //热门挂号
    go1(item) {
      wx.navigateTo({
        url: "/pages/doctorList/doctorList?id=" + item.dep_id
      })
    },
    go2() {
      wx.switchTab({
        url: '/pages/registration/registration'
      })
    },
    //抑郁症
    go3() {
      wx.navigateTo({
        url: '/pages/depressiontopics/depressiontopics'
      })
    },
    //失眠&男性
    go4(index) {
      console.log(index)
      switch (index) {
        case 0:
          wx.navigateTo({
            url: "/pages/masculinity/masculinity"
          })
          break;
        case 1:
          wx.navigateTo({
            url: "/pages/insomnia/insomnia"
          })
          break;
      }
    },
    go5() {
      wx.navigateTo({
        url: "/pages/healthCheckup/healthCheckup"
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.ll {
  height: 80px;
}

.da1 {
  width: 100%;
  height: 100px;
  display: flex;
}

.da11 {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .title {
    margin-top: 10px;
    Font-weight: bold;
    font-size: 14px;
  }
}

.da11 image {
  width: 30px;
  height: 30px;
}

.da2 {
  width: 100%;
  height: 110px;
  display: flex;
  justify-content: space-around;
  align-items: center;

  .da21 {
    width: 48%;
    height: 100%;
    border-radius: 15px;
    position: relative;
    background: linear-gradient(to right, #dbdfea, #6fa5fe);

    .title {
      color: #3450d4;
      Font-weight: bold;
      font-size: 18px;
      margin-top: 15px;
      margin-left: 15px;
    }

    .no {
      color: #fff;
      font-size: 16px;
    }
  }
}


.da21 image {
  position: absolute;
  bottom: 0;
  right: 20px;
  width: 50px;
  height: 50px;
}

.da3 {
  padding-top: 20px;

  background-color: #fbfbfb;

  .da331 {
    border-radius: 10px;
    height: 100%;
    padding-left: 10px;
    position: relative;
    background-color: #fff;

    .img {
      width: 80px;
      height: 80px;
      position: absolute;
      right: 0;
      bottom: 0;
    }

    .text {
      width: 100%;
      display: flex;
      align-items: flex-end;
      margin-top: 15px;
      color: #b2b6bb;
      font-size: 12px;

    }
  }

  .da34 {
    // margin-top: 5px;
    display: flex;
    justify-content: space-between;
    height: 130px;
    margin-top: 15px;

    background-color: #fbfbfb;
    border-radius: 5px;

    .da341 {
      width: 40%;
      height: 100%;
      background-color: black;
    }
  }

  .da32 {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-content: space-around;

    .da321 {
      width: 114px;
      height: 50px;
      border-radius: 5px;
      margin-top: 10px;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .title {
        font-size: 14px;
        margin-top: 5px;
      }

      image {
        width: 30px;
        height: 30px;
      }
    }
  }

  .da33 {
    // width: 98%;
    height: 130px;
    border-radius: 10px;
    margin: 15px auto;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    justify-content: space-between;
    background-color: #fff;
    // box-shadow: 1px 1px 10px #ccc;

    image {
      width: 120px;
      height: 120px;
    }


  }
}

.da31 {
  padding: 0 10px;
  Font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
